<template>
    <!-- 优惠券弹窗 -->
    <up-overlay :show="show" :opacity="0.3">
        <view class="warp">
            <view class="rect " @tap.stop>
                <view class="head">
                    <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/bc-quan.png"
                        mode="aspectFill"></image>
                </view>
                <view class="list pd-20">
                    <scroll-view class="index-bar" scroll-y>
                        <view style="height: 550rpx;">
                            <view class="item flex mb-20" v-for="(item, index) in data" :key="index">
                                <view class="left">
                                    <view class="type flex-center c-ff ft ft-20"
                                        style="white-space: nowrap;flex-wrap: nowrap;">{{ item.preferential_name }}
                                    </view>
                                    <view class="auto flex-center mt-20">
                                        <text class="ft ft-22 c-33 ml-8">{{ item.currency_symbol }}</text>
                                        <text class="ft-num c-33">{{ item.reduce }}</text>
                                    </view>
                                </view>
                                <view class="right ft-24 c-33  pd-20 ">
                                    <view class="fw-800 te-1"> {{ item.product_name }}</view>
                                    <view class="c-99 fw-400 mt-10 te-1"> {{ item.type_name_txt }}</view>

                                </view>
                            </view>
                        </view>
                    </scroll-view>
                    <view class="btn ft1 c-dbf flex-center auto fs0" @click="submit()">
                        立即领取
                    </view>
                </view>
            </view>
            <view class="close ml-20" @click.stop="close">
                <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/closeT.png"></image>
            </view>
        </view>
    </up-overlay>
</template>
<script lang="js" setup>
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import { onLoad, } from '@dcloudio/uni-app';
import { ref } from 'vue';
let { data } = defineProps(['data', 'show'])
const showOverlay = ref(false)
let emit = defineEmits('submit', 'close')
const submit = () => {
    emit('submit')
}
const close = () => {
    emit('close')
}
</script>
<style lang="scss">
.warp {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    margin-top: 300rpx;

    .rect {
        width: 518rpx;
        height: 950rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        margin-left: 44rpx;

        .head {
            width: 518rpx;
            height: 252rpx;
            // background: linear-gradient( , #DBF046 0%, #FEBC60 69%, #FFBA61 100%);
            border-radius: 40rpx 40rpx 0rpx 0rpx;
        }

        .list {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            height: calc(100% - 252rpx);

            .item {
                .left {
                    width: 182rpx;
                    height: 120rpx;
                    background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
                    border-radius: 20rpx 20rpx 20rpx 20rpx;

                    .type {
                        width: 126rpx;
                        height: 36rpx;
                        background: #333333;
                        border-radius: 20rpx 8rpx 8rpx 8rpx;
                    }
                }

                .right {
                    width: 296rpx;
                    height: 120rpx;
                    background: #F8F8F8;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                }
            }

            .btn {
                width: 448rpx;
                height: 78rpx;
                background: #333333;
                border-radius: 20rpx 20rpx 20rpx 20rpx;
                margin-top: auto;
            }
        }
    }

    .close {
        width: 44rpx;
        height: 44rpx;
    }
}
</style>